import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import Text from "ol/style/Text";
import Fill from "ol/style/Fill.js";
import Stroke from "ol/style/Stroke.js";
import Circle from "ol/style/Circle.js";
import userPng from "../img/user.png"
import offlineUserPng from "../img/offline-user.png"

/**
 * 点的样式
 * @returns {ol.style.Style}
 * @param data
 * @returns {Style}
 */
export const pointStyle=(data)=>{
  const scr1 = data.online=='1' || data.online=='true'?userPng:offlineUserPng;
  const storkeColor = [3,17,31,0.5];//data.online=='1' || data.online=='true'?[0,0,255,0.6]:[3,17,31,0.5];
  const textColor = 'rgb(255,255,255,0.9)';//data.online=='1' || data.online=='true'?'rgb(13,232,13)':'rgb(255,255,255,0.9)';
  return new Style({
    // 设置一个标识
    image: new Icon({
      src: scr1,
      // 这个是相当于是进行切图了
      // size: [50,50],
      // 注意这个，竟然是比例 左上[0,0]  左下[0,1]  右下[1，1]
      anchor: [0.5, 0.5],
      // 这个直接就可以控制大小了
      scale: 0.5,
      // 开启转向
      rotateWithView: true,
      // rotation: 0,
    }),
    color: 'rgb(13,232,13)',
    text: new Text({
      // 对其方式
      textAlign: 'center',
      // 基准线
      textBaseline: 'middle',
      offsetY: -30,
      // 文字样式
      font: 'normal 16px 黑体',
      // 文本内容
      text: data.title,
      // 文本填充样式
      fill: new Fill({
        color: textColor
      }),
      padding: [5, 5, 5, 5],
      backgroundFill: new Fill({
        color: 'rgba(0,0,255,0)'
      }),
      stroke: new Stroke({
        width: 5,
        //color: [34, 139, 34, 0.6],
        color: storkeColor,
        //lineDash: [10, 10],
      })
    })
  });
}

/**
 * 选中点的样式
 * @returns {ol.style.Style}
 * @param data
 * @returns {Style}
 */
export const focusPointStyle=(data)=>{
  const scr1 = data.online==='1' || data.online==='true'?userPng:offlineUserPng;
  const storkeColor = [0,0,255,0.9]; //data.online=='1' || data.online=='true'?[0,0,255,0.6]:[3,17,31,0.5];
  const textColor = 'rgb(255,255,255)';//data.online=='1' || data.online=='true'?'rgb(13,232,13)':'rgb(255,255,255,0.9)';
  return new Style({
    // 设置一个标识
    image: new Icon({
      src: scr1,
      // 这个是相当于是进行切图了
      // size: [50,50],
      // 注意这个，竟然是比例 左上[0,0]  左下[0,1]  右下[1，1]
      anchor: [0.5, 0.5],
      // 这个直接就可以控制大小了
      scale: 0.5,
      // 开启转向
      rotateWithView: true,
      // rotation: 0,
    }),
    color: 'rgb(13,232,13)',
    text: new Text({
      // 对其方式
      textAlign: 'center',
      // 基准线
      textBaseline: 'middle',
      offsetY: -30,
      // 文字样式
      font: 'normal 16px 黑体',
      // 文本内容
      text: data.title,
      // 文本填充样式
      fill: new Fill({
        color: textColor
      }),
      padding: [5, 5, 5, 5],
      backgroundFill: new Fill({
        color: 'rgba(0,0,255,0.8)'
      }),
      stroke: new Stroke({
        width: 5,
        //color: [34, 139, 34, 0.6],
        color: storkeColor,
        lineDash: [10, 10],
      })
    })
  });
}

/**
 * 线的样式
 * @returns {ol.style.Style}
 */
export const lineStyle=()=>{
  return new Style({
    stroke: new Stroke({
      width: 3,
      //color: [34, 139, 34, 0.6],
      color: [0,0,255,0.6],
      //lineDash: [10, 10],
    })
  })
}
/**
 * 轨迹的样式
 * @returns {ol.style.Style}
 */
export const trackStyle=()=>{
  return new Style({
    stroke: new Stroke({
      width: 3,
      //color: [34, 139, 34, 0.6],
      color: [255,100,100,0.6],
      //lineDash: [10, 10],
    })
  })
}

/**
 * 多边形样式
 * @returns {ol.style.Style}
 */
export const polygonStyle=()=>{
  return 	new Style({
    fill: new Fill({color: 'rgba(0,0,0, 0.1)'}),
    stroke: new Stroke({color: 'rgb(212,35,122)',width: 3}),
    image: new Circle({
      radius: 5,
      stroke: new Stroke({color: 'rgb(212,35,122)'}),
      fill: new Fill({color: 'rgba(255,255,255,0.6)'})
    })
  })
}

/**
 * layer 样式
 * @returns {ol.style.Style}
 */
export const layerStyle=()=>{
  return new Style({
    fill: new  Fill({color : [255, 255, 255, 0.2]}),
    stroke: new  Stroke({
      //color: '#ffcc33',
      color: [255,100,100,0.6],
      width: 2
    }),
    image: new  Circle({
      radius: 7,
      fill: new  Fill({color: '#ffcc33'})
    })
  })
}
